<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>文件管理平台</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
</head>
<body>
	<div class="container">
		<div class="content-search">
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-inline">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-input-block">
						<input id="filename"  autocomplete="off" class="layui-input" placeholder="请输入商品名称" type="text" placeholder="" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">所属分类</label>
					<div class="layui-input-inline">
						<select lay-verify="" id="type">
						  <option value="0">请选择</option>
						  <option value="1">图片</option>
						  <option value="2">视频</option>
						  <option value="3">文件</option>
						</select>   
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">开始时间</label>
					<div class="layui-input-inline">
						<input class="layui-input layui-date" placeholder="开始时间" id="start">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">截止时间</label>
					<div class="layui-input-inline">
						<input class="layui-input layui-date" placeholder="结束时间" id="end">
					</div>
				</div>
				<div class="layui-inline"><button class="layui-btn" lay-submit="">查询</button></div>
			</form>
		</div>

		<div class="tar mt10">
			<button class="layui-btn layui-btn-danger layui-btn-small">删除</button>
		</div>
		<div class="table-list roll-x">
			<table class="layui-table" lay-skin="line">
			  <thead>
			    <tr>
				  <th width="30"><input type="checkbox" class="my-checkbox" ></th>
			      <th colspan="2">文件名称</th>
			      <th>类型</th>
			      <th>发布时间</th>
			      <th>操作</th>
			    </tr> 
			  </thead>
			  <tbody id="body">
			    <tr>
				  <td><input type="checkbox" class="my-checkbox" ></td>
			      <td width="66" ><a href="javascript:;"  class="a3"><img class="img-cp" src="img/1.jpg" alt=""></a></td>
			      <td width="300">
			      	<a href="javascript:;"  class="a3"><div>Apple iPhone 7 128G 红色特别版</div>
			      	<div class="gray">128G,红色</div></a>
			      </td>
			      <td>文件</td>
			      <td>2017-05-05 12:00:00</td>
			      <td>
			      	<button class="layui-btn layui-btn-normal layui-btn-small check">编辑</button>
			      	<button class="layui-btn layui-btn-danger layui-btn-small a4">删除</button>
			      </td>
			    </tr>
			  </tbody>
			</table>   
		</div>
	</div>
	<div id="table-pages" style="text-align:center"></div>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
		layui.use(['jquery', 'laydate','form','layer','laypage'], function(){
			var $ = layui.jquery,
			    laydate = layui.laydate,
			    layer = layui.layer,
			    laypage = layui.laypage;


			// 分页
			 laypage({
			    cont: 'table-pages'
			    ,pages: 2
			    ,skip: true
			  });

            // 开始时间及截止时间
            var start = {
			   choose: function(datas){
			      end.min = datas; //开始日选好后，重置结束日的最小日期
			      end.start = datas //将结束日的初始值设定为开始日
			    }
			  };
			  
			  var end = {
			    choose: function(datas){
			      start.max = datas; //结束日选好后，重置开始日的最大日期
			    }
			  };

			$('#start').click(function(){
				start.elem = this;
    			laydate(start);
			});

			$('#end').click(function(){
				end.elem = this
    			laydate(end);
			});


                $(document).ready(function () {

                    $().ready(function() {
                        $.ajax({
                            type : "POST",
                            url : '/file/listFile',
                            data: {
                            },
                            dataType : "json",
                            success : function(data) {
                                console.log(data);
                                if (data.code != 0){
                                    alert(data.msg);
								}else {
                                    showData(data);
								}


                            },
                            error: function(data) {
                                
                            }
                        });
      		      });
                });



		    // 删除操作
		    $(document).on("click", ".a4", function() {
			    layer.open({
			      title:"删除操作"
				  ,content: '您确认要删除该商品吗？'
				  ,btn: ['取消', '确认']
				  ,yes: function(index, layero){
				       layer.closeAll();
				  }
				  ,btn2: function(index, layero){
				      layer.msg('删除成功！',{time: 1000});
				  }
				});
			});



			// 发布商品
			$(document).on("click", ".check", function() {
			    layer.open({
			      type:2
			      ,area:['80%', '90%']
			      ,title:"审核商品"
				  ,content: '审核商品.html'
				});
			});
			
		});


		/*
		 v
				  <td><input type="checkbox" class="my-checkbox" ></td>
			      <td width="66" ><a href="javascript:;"  class="a3"><img class="img-cp" src="img/1.jpg" alt=""></a></td>
			      <td width="300">
			      	<a href="javascript:;"  class="a3"><div>Apple iPhone 7 128G 红色特别版</div>
			      	<div class="gray">128G,红色</div></a>
			      </td>
			      <td>文件</td>
			      <td>2017-05-05 12:00:00</td>
			      <td>
			      	<button class="layui-btn layui-btn-normal layui-btn-small check">编辑</button>
			      	<button class="layui-btn layui-btn-danger layui-btn-small a4">删除</button>
			      </td>
			    </tr>
		 */
		function showData(data) {
            $("#body").empty();

            var  data = data.data;
            console.log(data);
            for (let i = 0; i <data.length; i++){
                var fileModel = data[i];
//                console.log(fileModel);
                var htmlContent = "<tr> <td><input type=\"checkbox\" class=\"my-checkbox\" ></td>" +
					"<td width=\"66\" ><a href=\"javascript:;\"  class=\"a3\"><img class=\"img-cp\" src=\"" +fileModel.pathInfo+
					"\" alt=\"\"></a></td> <td width=\"300\"><a href=\"javascript:;\"  class=\"a3\"><div>" +fileModel.originalName+
					"</div><div class=\"gray\">" +fileModel.ext+
					"</div></a></td><td>"+fileModel.type+
					"</td><td>" +fileModel.createTime+
					"</td><td><button class=\"layui-btn layui-btn-normal layui-btn-small check\">编辑</button><button class=\"layui-btn layui-btn-danger layui-btn-small a4\">删除</button>"
					"</td></tr>"

                $("#body").append(htmlContent);
			}

        }
	</script>
</body>
</html>